<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    figure{
        width: 1000px;
        margin: 0 auto;
        padding-top: 100px;
        color: #666;
        text-align: center;
    }
    footer{
        height: 380px;
        background-color: #2a2a2a;
    }
li{
    line-height:80px;
    display: inline-block;
    padding: 0 30px;
    cursor: pointer;
}
li：hover{
    background-color: #12b7f5;
}
li>a{
    text-decoration: none;
    font-size: 22px;
    color:#fff;
}
nav img{
    position: relative;
    top: 15px;
    margin: 0 50px;
}
section{
    height: 380px;
    display: flex;
    align-items:center;
    justify-content:center;
}
section>img{
    margin:0 50px;
}
    body{
        margin: 0;
    }
    header {
        height: 700px;
        background-image: url(bg.jpg);
        background-size:cover;
        display: flex;
        align-items:center;
        justify-content:center;
        }
        button{
            position:relative;
            top:100px;
            width: 200px;
            height:60px;
            background-color:transparent;
            color:#fff;
            font-size:24px;
            border:1px solid #fff;
            outline:none;
            border-radius: 10px;
            cursor:pointer;
        }
        div{
        height:300px;
        display: flex;
        align-items:center;
        justify-content:center;
        }
        span{
            font-size:64px;
            color:#e96d4f;
        }
        article{
            height: 600px;
            background-image:url(2.jpg);
            background-attachment:fixed;
        }
        main{
            height:580px;
            position:relative;
        }
        main>img{
            position:absolute;
            bottom:0;
            left: 180px;
}
main>aside {
    width:500px;
    position:absolute;
    top:100px;
    right: 200px;
    text-align: right;
}
aside>h1{
    font-size:50px;
    color:pink;
}
aside>p{
font-size:20px;
color:red;
}
aside>p>a{
text-decoration: none;
color:red;
}
map{
    display:block;
    width:100%;
    height:600px;
}
nav{
    height: 80px;
    width: 100%;
    background-color:rgba(18,183,245,0.5);

}
video{
    width: 100%;
}
</style>
</head>
<body>
<nav>
<a href=""><<img src="44434.png" alt=""></a>
<li><a href="">首页</a></li>
<li><a href="">下载</a></li>
<li><a href="">动态</a></li>
</nav>
    <header>
        <button >大佬</button>
    </header>
    <div>
        <span> 乐.在.沟.通</span>
</div>
 <article></article>
<main>
    <img src="27.png" >
    <aside>
<h1>沟通是跨越千山万水亲切的声音</h1>
<p>无论何时何地与好友想聊多久聊多久</p>
<p><a href=http://im.qq.com/">了解更多 <</a></p>
    </aside>
</main>
<map id="here"></map>
<section>
<img src="52.png" alt="">
<img src="114.png" alt="">
<img src="134.png" alt="">
<audio src="田馥甄-魔鬼中的天使.mp3" autobuffer autoloop loop controls></audio>
</section>
<video src="大鱼海棠.mp4" autobuffer autoloop loop controls poster="/images/video.png"></video>
<footer>
<hr>
<figure>
    <h6>Copyright  1998-2017 Tencent. All Rights Reserved.
腾讯公司 版权所有
</h6>
    <h6>任雅雯版权所有 </h6>
</figure>
</footer>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>
</html>